<template>
	<view class="content">
		<view class="boxbg">
			<view class="guang">
				<image src="/static/index/guang1.png"></image>
			</view>
			<view class="list" :class="setptwo?'list list2':'list'" :style="{left:(state?widths:0) +'rpx'}">
				<view class="item" v-for="(item,index) in datas" :key="index">
					<view class="box relative" :style="{backgroundImage: item.level==1?'url(https://home.miaokaikeji.com/web/applet/newimg/lv1.png)':item.level==2?'url(https://home.miaokaikeji.com/web/applet/newimg/lv2.png)':item.level==3?'url(https://home.miaokaikeji.com/web/applet/newimg/lv3.png)':item.level==4?'url(https://home.miaokaikeji.com/web/applet/newimg/lv4.png)':''}">
						<image class="level" :src="item.level==1?'/static/index/z1.png':item.level==2?'/static/index/z2.png':item.level==3?'/static/index/xiyou.png':item.level==4?'/static/index/zg.png':''"></image>
						<view class="shopimg">
							<image :src="item.imgUrlList[0]"></image>
						</view>
						<view class="bottom">
							<view class="title sl2">{{item.name}}</view>
						</view>
						<view class="price" v-if="item.dragonBallFlag!==1">￥{{item.price}}</view>
						<view class="price" v-if="item.dragonBallFlag==1">无价之宝</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var _this;
	import { priceInteger } from "@/utils";
	export default {
		data() {
			return {
				state: false,
				widths: 0,
				setptwo:false,
				datas:[],
				ajaxData:[],
				timer:null,
				boxId:'', //当前盲盒ID
				typeId:'',//当前页面单抽id
			};
		},
		onLoad(options) {
			_this=this;
			if(options.id){
				_this.boxId=options.id;
				_this.ajax();
			}
		},
		onShow() {},
		methods:{
			returnBack(){
				_this.$routerTo.navigateBack();
			},
			// 查看盲盒所有商品
			ajax(){
				_this.$HTTP({
					method: 'GET',
					url: 'shopServer/box/getBoxDetail/'+_this.boxId,
					data: {
						time: Date.parse(new Date())
					}
					// header:'form'
				}).then(res => {
					_this.typeId=res.openTypeList[0].id;
					res.goodsList.forEach((item, index) => {
						item.price = priceInteger(item.price);
						// item.recyclePrice = priceInteger(item.recyclePrice);
					})
					res.goodsList=res.goodsList.sort(() => Math.random() -0.5); //混淆商品顺序
					_this.ajaxData.push(...res.goodsList)
					// // 获取数据添加商品到ajaxData之后再调用
					_this.getdata() //添加商品
				}).catch(err => {
					console.log(err);
				});
			},
			// 首尾添加扰乱商品
			getdata(){
				let len=_this.ajaxData.length-1
				for(let i=0;i<40;i++){
					_this.datas.push(_this.ajaxData[Math.round(Math.random()*len)]) //添加扰乱商品
				}
				_this.datas.push(..._this.ajaxData) //添加真实中奖商品
				for(let i=0;i<40;i++){
					_this.datas.push(_this.ajaxData[Math.round(Math.random()*len)]) //添加扰乱商品
				}
				// 添加玩扰乱商品在执行抽奖
				setTimeout(function(){
					_this.start();
				},500)
			},
			// 开始抽奖
			start() {
				_this.$HTTP({
					method: 'POST',
					url: 'shopServer/box/openBox',
					data: {
						boxId: _this.boxId,
						openTypeId: _this.typeId, //开盒类型ID，在这个页面固定单抽
						time: Date.parse(new Date())
					},
					header:'form'
				}).then(res => {
					res.forEach((item, index) => {
						item.price = priceInteger(item.price);
						item.newprice = item.price;
						// item.recyclePrice = priceInteger(item.recyclePrice);
					})
					
					let ran=_this.ajaxData.findIndex((item,index)=>item.id==res[0].id); //(用index定位抽中的商品)
					let setp1=(ran+40-1)*-249 
					_this.widths=setp1
					
					_this.state = true
					_this.timer=setTimeout(()=>{
						_this.step2(setp1,res[0])
						clearTimeout(_this.timer)
					},4700)
				}).catch(err => {
					console.log(err);
				});
			},
			step2(val,item){
				_this.setptwo=true
				let newArr=[];
				newArr.push(item)
				setTimeout(()=>{
					_this.$routerTo.redirectTo({
						path: '/pages/index/LotteryResults?data='+JSON.stringify(newArr)+'&boxId='+_this.boxId
					});
				},500)
			},
		}
	}
</script>

<style lang="scss" scoped>
.content{
	width: 100%;
	height: 100vh;
	background-image: url('https://home.miaokaikeji.com/web/applet/newimg/drawbg.png');
	background-size: 100% 100%;
	.boxbg{
		width: 100%;
		height: 952rpx;
		background-image: url('https://home.miaokaikeji.com/web/applet/newimg/drawbox.png');
		background-size: 100% 100%;
		position: absolute;
		left: 0;
		top: 236rpx;
	}
	.guang{
		width: 100%;
		position: absolute;
		display: flex;
		justify-content: center;
		left: 0;
		top: 110rpx;
		image{
			width: 347rpx;
			height: 797rpx;
		}
	}
	.list {
		position: absolute;
		left: 0;
		top: calc(50% - 150rpx);
		display: flex;
		box-sizing: border-box;
		transition: left 5s;
		.item {
			width: 250rpx;
			height: 350rpx;
			box-sizing: border-box;
			padding: 0 10rpx;
			.box{
				width: 100%;
				height: 100%;
				background-size: 100% 100%;
				box-sizing: border-box;
				padding: 10rpx;
				.level{
					width: 88rpx;
					height: 96rpx;
					position: absolute;
					right: -15rpx;
					top: -20rpx;
				}
				.shopimg{
					width: 100%;
					height: 200rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					image{
						width: 100%;
						height: 145rpx;
					}
				}
				.bottom{
					width: 100%;
					height: 70rpx;
					position: absolute;
					left: 0;
					bottom: 70rpx;
					box-sizing: border-box;
					padding: 0 10rpx;
					.title{
						width: 100%;
						font-size: 20rpx;
						color: #000000;
						text-align: center;
					}
				}
				.price{
					width: 100%;
					text-align: center;
					font-size: 24rpx;
					font-weight: bold;
					color: #FFFFFF;
					position: absolute;
					left: 0;
					bottom: 30rpx;
					box-sizing: border-box;
					padding: 0 10rpx;
				}
			}
		}
	}
	.list2{
		transition: left 0.8s;
	}
}
</style>
